<template>
  <div id="app">
    <h2>倒计时{{count}}</h2>
    <button @click="xiaohui">销毁</button>
    <button @click="genxin">更新</button>
    
  </div>
</template>

<script>
//引入axios
// import axios from 'axios'

//进行导入
import {user_login} from './utils/api.js'


export default {
  name: 'App',
  data(){
   return{
     count:60,
     timerid:null
   }
  },
  methods:{
    xiaohui(){
      //销毁当前组件自己
      this.$destroy()
    },
    genxin(){
      this.count++
    }
  },
  //组件生命周期
  // 任何一个单文件组件都有自己的生命周期, 每个生命周期函数, 都可以加以利用.
  // 生命周期函数就是组件在特定时刻会自动调用的函数

  //创建期,组件创建期只会创建一次
  beforeCreate(){
    console.log('组件创建前期');
  },
  created(){
    console.log('组件创建后');
  },

  //挂载期，组件挂载期只创建一次
  beforeMount(){
    // console.log('组件挂载前期');
  },
  mounted(){
    console.log('组件挂载后');
     this.timerid=setInterval(()=>{
       this.count--
    },1000)

    // 发送请求，默认ajax请求 是发给项目内置的express服务器, 二内置的这个express服务器没有提供这个接口, 所以请求失败,报错 404
    // 所以进行事件代理,就是先发送请求内置的express通过内置的express进行转接
    // axios.post('api/user/login',{phone:123,pass:1234}).then((res)=>{
    //     console.log(res.data);
    // })

    //对user_login进行调用
     user_login({phone:'13611129070',pass:'1234'}).then((res)=>{
      console.log(res.data);
    })
  },

  //组件更新期，更新期的方法会反复执行( 组件更新一次, 就会调用一次 )
  beforeUpdate(){
    console.log('组件更新前');
  },
  Updated(){
    console.log('组件更新后');
  },

  //组件销毁期，释放组件内部占用的资源(内存), 比如: 取消网络请求, 销毁定时器, 取消事件监听.
  beforeDestroy(){
    console.log('组件销毁前');
     clearInterval(this.timerid)
  },
  Destroyed(){
    console.log('组件销毁后');
   
  }
}


</script>

<style>

</style>
